import React, { useState } from 'react';
import {
  Card,
  Table,
  Tag,
  Button,
  Typography,
  Form,
  Input,
  DatePicker,
  Select,
  Row,
  Col,
  Space
} from 'antd';
import { SearchOutlined, ClearOutlined, FileDoneOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Title, Paragraph } = Typography;
const { RangePicker } = DatePicker;
const { Option } = Select;

const allSettlements = [
    { key: 'S001', tradeOrderId: 'T001', clientId: 'CUST-001', clientName: '客户A', fundCode: 'F001', fundName: '华夏成长混合', type: '卖出', amount: 5000, price: 1.25, quantity: 4000, timestamp: '2025-06-21 14:05:10', status: 'success' },
    { key: 'S002', tradeOrderId: 'T001', clientId: 'CUST-002', clientName: '客户B', fundCode: 'F002', fundName: '易方达消费行业', type: '买入', amount: 8000, price: 2.15, quantity: 3720.93, timestamp: '2025-06-21 14:05:12', status: 'success' },
    { key: 'S003', tradeOrderId: 'T002', clientId: 'CUST-007', clientName: '王先生', fundCode: 'F004', fundName: '嘉实新兴产业股票', type: '卖出', amount: 5000, price: 0.98, quantity: 5102.04, timestamp: '2025-06-22 11:30:00', status: 'success' },
    { key: 'S004', tradeOrderId: 'T003', clientId: 'CUST-113', clientName: '赵先生', fundCode: 'F005', fundName: '广发纳斯达克100ETF', type: '买入', amount: 12000, price: 3.45, quantity: 3478.26, timestamp: '2025-06-23 17:01:45', status: 'success' },
    { key: 'S005', tradeOrderId: 'T001', clientId: 'CUST-003', clientName: '客户C', fundCode: 'F001', fundName: '华夏成长混合', type: '卖出', amount: 2000, price: 1.25, quantity: 1600, timestamp: '2025-06-21 14:06:01', status: 'failure', reason: '账户交易权限不足' },
    { key: 'S006', tradeOrderId: 'T001', clientId: 'CUST-004', clientName: '客户D', fundCode: 'F001', fundName: '华夏成长混合', type: '卖出', amount: 10000, price: 1.25, quantity: 8000, timestamp: '2025-06-20 14:05:10', status: 'success' },
    { key: 'S007', tradeOrderId: 'T001', clientId: 'CUST-005', clientName: '客户E', fundCode: 'F002', fundName: '易方达消费行业', type: '买入', amount: 3000, price: 2.15, quantity: 1395.34, timestamp: '2025-06-20 14:05:12', status: 'success' },
];

const STORAGE_KEY = 'settlementManagementList';

const SettlementManagement = () => {
    const local = localStorage.getItem(STORAGE_KEY);
    const [filteredSettlements, setFilteredSettlements] = useState(local ? JSON.parse(local) : allSettlements);
    const [form] = Form.useForm();

    const onFinish = (values) => {
        let data = [...allSettlements];

        if (values.clientId) {
            data = data.filter(item => item.clientId.includes(values.clientId));
        }
        if (values.fundCode) {
            data = data.filter(item => item.fundCode.includes(values.fundCode));
        }
        if (values.status) {
            data = data.filter(item => item.status === values.status);
        }
        if (values.dateRange) {
            const [start, end] = values.dateRange;
            data = data.filter(item => {
                const itemDate = dayjs(item.timestamp);
                return itemDate.isAfter(start) && itemDate.isBefore(end);
            });
        }
        
        setFilteredSettlements(data);
        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
    };

    const onReset = () => {
        form.resetFields();
        setFilteredSettlements(allSettlements);
        localStorage.setItem(STORAGE_KEY, JSON.stringify(allSettlements));
    };

    const columns = [
        { title: '交割单号', dataIndex: 'key', key: 'key' },
        { title: '客户账号', dataIndex: 'clientId', key: 'clientId' },
        { title: '客户姓名', dataIndex: 'clientName', key: 'clientName' },
        { title: '基金名称', dataIndex: 'fundName', key: 'fundName' },
        { title: '交易类型', dataIndex: 'type', key: 'type', render: t => <Tag color={t === '买入' ? 'success' : 'error'}>{t}</Tag> },
        { title: '成交金额(元)', dataIndex: 'amount', key: 'amount', render: (a) => a.toLocaleString() },
        { title: '成交价格', dataIndex: 'price', key: 'price' },
        { title: '成交时间', dataIndex: 'timestamp', key: 'timestamp', sorter: (a, b) => dayjs(a.timestamp).unix() - dayjs(b.timestamp).unix() },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (s, record) => <Tag color={s === 'success' ? 'green' : 'red'}>{s === 'success' ? '成功' : `失败: ${record.reason || '未知'}`}</Tag>
        },
    ];

    return (
        <div style={{ padding: '24px' }}>
            <Title level={3}>交割单管理</Title>
            <Paragraph type="secondary">
                查询并管理由后台系统返回的每一笔具体交易的交割单。
            </Paragraph>

            <Card style={{ marginBottom: 24 }}>
                <Form form={form} onFinish={onFinish}>
                    <Row gutter={24}>
                        <Col span={6}>
                            <Form.Item name="clientId" label="客户账号">
                                <Input placeholder="请输入客户账号" />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="fundCode" label="基金代码">
                                <Input placeholder="请输入基金代码" />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="status" label="交割状态">
                                <Select placeholder="请选择状态" allowClear>
                                    <Option value="success">成功</Option>
                                    <Option value="failure">失败</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                         <Col span={6}>
                            <Form.Item name="dateRange" label="成交日期">
                                <RangePicker style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24} style={{ textAlign: 'right' }}>
                            <Space>
                                <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                                    查询
                                </Button>
                                <Button onClick={onReset} icon={<ClearOutlined />}>
                                    重置
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </Card>

            <Card title={<><FileDoneOutlined /> 交割记录</>}>
                <Table
                    columns={columns}
                    dataSource={filteredSettlements}
                    rowKey="key"
                    pagination={{ pageSize: 10 }}
                />
            </Card>
        </div>
    );
};

export default SettlementManagement; 